<template>
	<view class="content font_family">
		<view class="top_search f_j">
			<image src="../../static/index/ss_icon.png" mode=""></image>
			<u--input placeholder="请输入关键词检索" border="none" v-model="value" @confirm='confirm'></u--input>
		</view>
		<view class="hot_ss" v-if="history_list.length>0">
			<view class="title f_z_b f_j">
				<text>历史搜索</text>
				<u-icon name="trash" color="" size="20" @click="get_ss_list('del')"></u-icon>
			</view>
			<view class="box f_j f_w">
				<view class="item" v-for="(item,index) in history_list" :key='index'
					@click="go(`/pages/search/list?key=${item.title}`)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="hot_ss">
			<view class="title">
				热门搜索
			</view>
			<view class="box f_j f_w">
				<view class="item" v-for="(item,index) in common.hot_good" :key='index'
					@click="go(`/pages/search/list?key=${item}`)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="hot_sp">
			<view class="title f_j">
				<image src="../../static/public/hot_icon.png" mode=""></image>
				<view class="">
					热门商品
				</view>
			</view>
			<view class="item f" v-for="(item,index) in list" :key="index"
				@click="go(`/pages/detail/detail?id=${item.id}`)">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="msg f_d f_z_b">
					<view class="msg_title">
						{{item.title}}
					</view>
					<view class="price">
						￥{{item.min_dl_price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { sy_goods_list } from '@/api/page.js'
	import { searchList } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['common', 'dl_id'])
		},
		data() {
			return {
				value: '',
				query_data: {
					dl: '',
					page: 1,
					type: 1
				},
				list: [],
				more: 'loadmore',
				query_history: {
					title: '',
					page: 1,
					action: 'list'
				},
				history_list: []
			}
		},
		onShow() {
			this.get_ss_list('list')
		},
		onLoad() {
			this.query_data.dl = this.dl_id
			this.get_hot()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_hot()
			}
		},
		methods: {
			confirm() {
				if (!this.value) {
					uni.showToast({
						icon: 'none',
						title: "输入你想要搜索的商品吧！"
					})
					return
				}
				this.get_ss_list('add')
				setTimeout(() => {
					this.go(`/pages/search/list?key=${this.value}`)
				}, 500)
			},
			get_hot() {
				sy_goods_list(this.query_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.list = [...this.list, ...res.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			get_ss_list(type) {
				if (type == 'add') {
					this.query_history.title = this.value
				}
				this.query_history.action = type
				searchList(this.query_history).then(res => {
					if (res.code == 1) {
						if (type == 'list') {
							this.history_list = res.data.data
						}
						if (type == 'del') {
							this.history_list = []
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		padding-bottom: 0rpx;
		background-color: #FFFFFF;

		.top_search {
			padding: 20rpx 30rpx;
			background: #F6F7F9;
			border-radius: 630rpx 630rpx 630rpx 630rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 30rpx;
			}
		}

		.hot_ss {
			margin-top: 40rpx;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.box {
				margin-top: 24rpx;

				.item {
					background: #F6F7F9;
					border-radius: 660rpx 660rpx 660rpx 660rpx;
					font-size: 24rpx;
					color: #3D3D3D;
					padding: 15rpx 40rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.hot_sp {
			padding: 30rpx;
			padding-top: 20rpx;
			min-height: 80vh;
			margin-top: 30rpx;
			background: linear-gradient(180deg, #FDC2BE 0%, rgba(216, 216, 216, 0) 20%);
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.title {
				margin-bottom: 30rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #D34750;

				image {
					width: 76rpx;
					height: 76rpx;
					margin-right: 20rpx;
				}
			}

			.item {
				margin-bottom: 30rpx;

				image {
					width: 108rpx;
					height: 108rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.msg {
					margin-left: 30rpx;

					.msg_title {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.price {
						font-size: 28rpx;
						color: #F54750;
					}
				}
			}
		}
	}
</style>